<template>
	<view class="home">
		<view class="nav"></view>
		<view class="new_home_box my-pdl-15">

		</view>
		<view class="profit" @click="toMyProfit()">
				<view class="tra_amount_tlt">我的收益</view>
				<view class="tra_amount_money">￥:{{billAmount}}</view>
		</view>
			<view class="tra_amount">
				<view class="button">
					<view class="item" @click="toWelfare()">
						<view class="right4">
							<view class="top1">待领取</view>
							<view class="button1">{{waitResive}}</view>
						</view>
					</view>
					<view class="item" @click="toMyPoints()">
						<view class="right4">
							<view class="top1">积分</view>
							<view class="button1">{{points}}</view>
						</view>
					</view>
					<view class="item">
						<view class="right4">
							<view class="top1">推广收益</view>
							<view class="button1">{{saleAmount}}</view>
						</view>
					</view>
				
				</view>
					<image @click.stop="toWelfare()" src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/4.gif"></image>
			</view>
			<view class="lump">
				<view class="item66" @click="toSignin()">
					<view class="left66">
						<view class="top66">
							分享
						</view>
						<view class="button66">
							分享有积分
						</view>
					</view>
					<view class="right66">
						<image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/%E5%88%86%E4%BA%AB456.png"></image>
					</view>
				</view>
				<view class="item66" @click="toTurntable()">
					<view class="left66">
						<view class="top66">
							大转盘
						</view>
						<view class="button66">
							好礼转不停
						</view>
					</view>
					<view class="right66">
						<image src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/09566576.png"></image>
					</view>
				</view>
			</view>
		<view class="my-mgt-20"><kingKongarea></kingKongarea></view>
		<view class="tice my-pdl-10 my-mgtb-15"><u-notice-bar mode="vertical" type="none" :list="noticeList"></u-notice-bar></view>
		<view class="details_box my-mgt-15 my-pdl-15"><view class="details_box_left">每日晒图</view></view>
		<view class="blueprinting">
		<movable-area class="t1">
			<movable-view out-of-bounds="true" class="imgbox" :style="imgboxStyle" direction="horizontal">
				<template v-for="(item, index) in imgs123">
					<image @click="select(item)" mode="heightFix" :key="index"
						style="height:230rpx;width: 24%;margin-left:30rpx;margin-top: 10rpx;" :src="item.url" lazy-load="true"></image>
				</template>
			</movable-view>
		</movable-area>
		</view>
<!-- 		<view class="details_box my-mgt-15 my-pdl-15"><view class="details_box_left">交易金额</view></view>
		<view class="lines my-mgt-10 my-pdl-15">
			<view class="lines_tlt">
				<view class="lines_tlt_name">我的交易金额进度</view>
				<view class="lines_tlt_img my-pdt-15 my-pdr-10" @click="gomerchants">
					<text class="my-mgr-5">查看奖励</text>
					<image :src="rightarrow" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="progress_box">
				<view class="progress_line">
					<u-circle-progress border-width="35" width="280" active-color="#F05329" duration="2000" :percent="transferPer">
						<view class="u-progress-content">
							<view class="u-progress-info">{{ transferPer || 0 }}%</view>
							<view class="u-progress-txt">交易</view>
						</view>
					</u-circle-progress>
				</view>
				<view class="liji_btn_box my-pdt-10">
					<view class="liji_btn_box_orig">上期中奖号码</view>
					<view class="liji_btn_box_num">
						<view class="liji_num">
							<view class="liji_num_red">{{ consumeNo || 0 }}</view>
							<view class="liji_num_gray my-mgt-10">消费积分</view>
						</view>
						<view class="liji_num">
							<view class="liji_num_red">{{ rewardNo || 0 }}</view>
							<view class="liji_num_gray my-mgt-10">奖励积分</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	<!-- 	<view class="qualifying_box my-pdlr-15">
			<view class="details_box">
				<view class="left">近期交易金额</view>
				<view class="right" @click="golookdetail">
					<text class="my-mgr-10">详情</text>
					<image :src="rightarrow" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>

			<view class="" v-if="tranRefArr.length > 0">
				<view class="qualifying_box_two my-pdt-10" v-for="(item, index) in tranRefArr" :key="item" v-show="tranRefArr.length > 0">
					<view class="">
						<text>交易金额：</text>
						<text>{{ item.transAmount || 0 }}</text>
					</view>
					<view class="">
						<text>交易单号：</text>
						<text>{{ item.tranRefCode || '暂无' }}</text>
					</view>
				</view>
			</view>
			<view class="my-flex-col-c" style="width: 100%;height: 150rpx;" v-else>暂无数据</view>
		</view> -->
		<view class="details_box my-mgtb-15 my-pdlr-15"><view class="details_box_left">热门服务</view></view>
		<view class="rmservice_box">
			<view class="rmservice_box_big">
				<view class="tlt_box my-pdl-15 my-pdt-10">
					<view class="fir">积分兑换</view>
					<view class="two">积分兑换精美礼品，热门好物</view>
					<view class="btn_bind">点击查看</view>
				</view>
				<view class="img_box"><image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/jxUlCMZTDV_jifen_icon.png" mode=""></image></view>
			</view>
			<view class="rmservice_box_bot my-mgt-10">
				<view class="left_orig my-pdl-15 my-pdt-5">
					<view class="li_one">快速审核，立即申请</view>
					<view class="li_noces">申请信用卡</view>
					<view class="li_box">
						<view class="txt_shenqing"><view class="shenqing_btn">申请</view></view>
						<view class="img_div"><image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/HBjCFxNdPV_icard_icon.png" mode=""></image></view>
					</view>
				</view>
				<view class="right_blue my-pdl-15 my-pdt-5">
					<view class="li_one">积分兑换话费流量</view>
					<view class="li_noces">话费流量充值</view>
					<view class="li_box">
						<view class="txt_shenqing"><view class="chongzhi_btn">充值</view></view>
						<view class="img_div"><image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/PWVTtDsHhY_jiantou_icon.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</view>
	<!-- 	<view class="details_box my-mgtb-15 my-pdlr-15"><view class="details_box_left">申请终端</view></view>
		<view style="width: 100%;height: 80rpx;line-height: 25rpx;text-align: center;" v-if="goodDev.length <= 0">暂无数据</view>
		<view class="goods_box my-pdlr-15" v-else>
			<view class="goods_box_once my-mgt-15" v-for="(item, index) in goodDev" :key="index" @click="godetial(item.id)">
				<view class="goods_box_once_img"><image :src="item.imgUrl" mode=""></image></view>
				<view class="goods_box_once_tlt">{{ item.goodsName }}</view>
				<view class="goods_box_once_money">{{ item.price }}元</view>
			</view>
		</view> -->
		<tabbar></tabbar>
		 <previewImage ref="previewImage" :descs="imgs123" :imgs="imgs123" @longPress="longPress"></previewImage>
	</view>
</template>

<script>
import kingKongarea from '@/components/kingKongArea/kingKongArea.vue';
import tabbar from '@/components/tabbar/tabbar.vue';
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
import { bannerApi, scheduleApi, amountApi, finalGoodsApi, homeheaDataApi } from '@/api/home.js';
export default {
	components: {
		kingKongarea,
		tabbar,
		previewImage
	},
	data() {
		return {
			imgboxStyle: {
				"width": "400vw"
			},
			imgs123: [{
					url: 'https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/6623.png',
					name:'图片1'
				},
				{
					url: 'https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/6623.png',
					name:'图片2'
				},
				{
					url: 'https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/6623.png',
					name:'图片3'
				},
				{
					url: 'https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/6623.png',
					name:'图片4'
				}
			],
			list: [], //轮播数组
			noticeList: [
				'恭喜小明成功领取1600红包积分！',
				'恭喜小王成功领取3800红包积分！',
				'恭喜小五成功领取1300红包积分！',
				'恭喜李三成功领取4600红包积分！',
				'恭喜王二成功领取2700红包积分！'
			],
			rightarrow: 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png',
			consumeNo: '', //消费积分
			rewardNo: '', //奖励积分
			transferPer: '', //交易百分比
			tranRefArr: [], //交易数组
			pageIndex: 0, //页数
			pageSize: 30, //条数
			goodDev: [],
			total: 1,
			billAmount: 0, //当月收益
			saleAmount:0,
			points:0,
			waitResive:0
		};
	},
	created() {
		// this.getBanner()
		this.getRequest();
	},
	onShow() {
		this.getHeadData();
	},
	// 上拉加载更多
	onReachBottom() {
		this.getGoods();
	},
	methods: {
		select(item){
			this.$refs.previewImage.open();
		},
		longPress(){
			alert("已经触发长按事件")
		},
		toMyProfit(){
			uni.navigateTo({
				url:'/activePages/pages/my_profit/my_profit'
			})
		},
		toTurntable(){
			uni.navigateTo({
				url:'/pages/main/pointWheel'
			})
		},
		toSignin(){
			// uni.navigateTo({
			// 	url:'./homePages_share/homePages_share'
			// })
			uni.navigateTo({
				url:'/pages/main/childPages/inviteCode'
			})
		},
		toWelfare(){
			uni.navigateTo({
				url:'/activePages/pages/welfares'
			})
		},
		toMyPoints(){
			uni.navigateTo({
				url:'myPoints'
			})
		},
		getRequest() {
			uni.showLoading({
				title: '正在加载中....',
				mask: true
			});
			Promise.all([this.getHeadData(), this.getSchedule(), this.getAmount(), this.getGoods()])
				.then(() => {
					uni.hideLoading();
				})
				.catch(() => {
					uni.showToast({
						title: '数据报错了',
						icon: 'none'
					});
				});
		},
		// 获取头部数据
		async getHeadData() {
			const res = await homeheaDataApi({});
			if (res.statusCode === 200) {
				this.saleAmount=res.data.data.saleAmount;
				this.billAmount = res.data.data.billAmount;
				this.points=res.data.data.points;
				this.waitResive=res.data.data.waitResive;
				this.$forceUpdate();
			
			}
		},
		// 查看详情
		golookdetail() {
			uni.navigateTo({
				url: '/pages/main/lookDetails'
			});
		},
		// 订单详情
		godetial(goodid) {
			uni.setStorageSync('id', goodid);
			uni.navigateTo({
				url: '/pages/mallStore/lineItem'
			});
		},
		// 查看奖励
		gomerchants() {
			uni.navigateTo({
				url: '/pages/main/childPages/merchantsReward'
			});
		},
		// 轮播图
		async getBanner() {
			uni.showLoading({
				title: '正在加载中....'
			});
			const res = await bannerApi({});
			if (res.statusCode === 200) {
				uni.hideLoading();
				res.data.data.forEach(item => {
					this.list.push({ image: item.imgUrl, title: item.imgLink });
				});
			}
		},
		// 交易进度
		async getSchedule() {
			const res = await scheduleApi({});
			if (res.statusCode === 200) {
				this.consumeNo = res.data.data.consumeNo;
				this.rewardNo = res.data.data.rewardNo;
				this.transferPer = parseInt(res.data.data.transferPer * 100 - 0);
			}
		},
		// 交易金额
		async getAmount() {
			let params = {
				pageIndex: 0,
				pageSize: 2
			};
			const res = await amountApi(params);
			if (res.statusCode === 200) {
				if (res.data.data === null) {
					this.tranRefArr = [];
				} else {
					this.tranRefArr = res.data.data.rows;
				}
			}
		},
		// 终端商品
		async getGoods() {
			if (this.goodDev.length >= this.total) return;
			let params = {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize
			};
			const res = await finalGoodsApi(params);
			if (res.statusCode === 200) {
				this.goodDev = res.data.data === null ? [] : [...this.goodDev, ...res.data.data.rows];
				this.total = res.data.data.total;
				this.pageIndex++;
			}
		}
	}
};
</script>
<style>
	page {
		background: #F0F0F0;
		background-image: url('https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/586654.png');
	}
</style>
<style lang="scss" scoped>
.home {
	.nav{
		height: var(--status-bar-height);
		// background-color: #b00404;
	}
	.advise_turntable {
		height: 200rpx;
		
		border-radius: 16rpx;
		image {
			height: 300rpx;
			width: 100%;
			border-radius: 16rpx;
		}
	}

	.new_home_box {
		padding-bottom: 20rpx;
		// opacity: 0.7;
		// background-image: url('https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/87989.png');
		height: 280rpx;
	}
	.profit{
		height: 120rpx;
		justify-content: center;
		position: absolute;
		top: 100rpx;
		left: 36%;
		.tra_amount_tlt{
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 38rpx;
			color: #fff;
			font-weight: bold;
		}
		.tra_amount_money{
			height: 60rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	.tra_amount {
		height: 160rpx;
		text-align: left;
		box-shadow: 0rpx 12rpx 12rpx rgba(111, 147, 247, 0.05);
		background-color: #fff;
		border-radius: 16rpx;
		margin: -100rpx 30rpx auto 30rpx;
		border-bottom: 10rpx solid #e7e7e7;
		opacity: 0.9;
		

	

		.button {
			height: 150rpx;
			display: flex;
			.item {
				width: 33%;
				height: 150rpx;
				text-align: center;
				justify-content: center;
				
				.right4 {
					.top1 {
						height: 75rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #000;
						padding-top: 30rpx;
					}
					.button1 {
						height: 75rpx;
						font-size: 36rpx;
						font-weight: bold;
						margin-top: 30rpx;
						color: #000;
					}
				}
			}
		}
			image{
				height: 160rpx;
				width: 160rpx;
				position: absolute;
				top: 240rpx;
				left: 13%;
					transform:rotate(30deg);
					-ms-transform:rotate(30deg); /* IE 9 */
					-webkit-transform:rotate(30deg); /* Safari and Chrome */
				
			}
	}
	.lump{
		height: 150rpx;
		margin: 15rpx 30rpx auto 30rpx;
		border-radius: 16rpx;
		text-align: center;
		justify-content: space-between;
		display: flex;
		.item66{
			height: 150rpx;
			width: 49%;
			text-align: center;
			display: flex;
			background-color: #f2f5fc;
			border-radius: 16rpx;
			.left66{
				width: 50%;
				height: 150rpx;
				border-top-left-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
				padding-top: 15rpx;
				.top66{
					height: 75rpx;
					line-height: 75rpx;
					font-size: 30rpx;
					font-weight: 800;
					color: #000000;
				}
				.button66{
					height: 75rpx;
					color: #7f8084;
					font-size: 20rpx;
				}
			}
			.right66{
				width: 50%;
				height: 150rpx;
				border-bottom-right-radius: 16rpx;
				border-top-right-radius: 16rpx;
				image{
					height: 110rpx;
					width: 110rpx;
					border-bottom-right-radius: 16rpx;
					border-top-right-radius: 16rpx;
					margin-top: 20rpx;
				}
			}
		}
		
	}
	.home-title {
		width: 100%;
		height: 150rpx;
		background: #ffffff;
		display: flex;
		padding-top: 70rpx;

		.txt {
			width: 89%;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}

		image {
			width: 45rpx;
			height: 45rpx;
			padding-top: 5rpx;
		}
	}

	.wrap {
		width: 100%;
		height: 298rpx;
	}

	.tice {
		height: 85rpx;
		width: 92%;
		background: #ffffff;
		border-radius: 16rpx;
		padding-top: 8rpx;
	}

	.lines {
		width: 690rpx;
		height: 400rpx;
		margin: auto;
		border-radius: 20rpx;
		background: #ffffff;

		.lines_tlt {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.lines_tlt_img {
				width: 30%;
				height: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
				text-align: right;
			}
			.lines_tlt_name {
				width: 70%;
				height: 100%;
				line-height: 100rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.progress_box {
			width: 100%;
			height: 220rpx;
			display: flex;

			.progress_line {
				width: 310rpx;
				height: 150rpx;

				.u-progress-content {
					width: 50%;
					height: 100rpx;
					text-align: center;
				}
				.u-progress-info {
					width: 100%;
					height: 60rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 38rpx;
					font-weight: bold;
					color: #f05329;
				}
				.u-progress-txt {
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
				}

				.line_num {
					width: 100%;
					height: 30rpx;
					display: flex;
					line-height: 10rpx;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #000000;
				}

				.line_scope {
					width: 100%;
					height: 35rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}
			}

			.liji_btn_box {
				width: 310rpx;
				height: 300rpx;
				.liji_btn_box_orig {
					width: 100%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-weight: bold;
					color: #000000;
				}
				.liji_btn_box_num {
					width: 100%;
					height: 150rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.liji_num {
						display: flex;
						flex-direction: column;
						align-items: center;
						.liji_num_red {
							font-size: 36rpx;
							font-weight: 500;
							color: #f05329;
						}
						.liji_num_gray {
							font-size: 24rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}
			}
		}
	}
	.blueprinting{
		// height: 250rpx;
		background-color: #fff;
		margin: auto 30rpx;
		border-radius: 8rpx;
		
		overflow: hidden;
		text-overflow: ellipsis;
		.t1 {
			width: 100vw;
			margin-top: 10rpx;
			height: 250rpx;
		
			.imgbox {
				width: 365vw;
				height: 250rpx;
			}
		}
	}

	.details_box {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		.details_box_left,
		.left {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			color: #000000;
		}
		.details_box_left {
			font-size: 40rpx;
			font-weight: bold;
		}
		.left {
			font-size: 34rpx;
			font-weight: 500;
		}

		.details_box_right,
		.right {
			width: 20%;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.qualifying_box {
		width: 690rpx;
		height: 270rpx;
		margin: auto;
		margin-top: 50rpx;
		background: #ffffff;
		border-radius: 20rpx;
		.qualifying_box_two {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.rmservice_box {
		width: 690rpx;
		height: 440rpx;
		margin: auto;
		.rmservice_box_big {
			width: 100%;
			height: 200rpx;
			background: linear-gradient(90deg, #c8ddd4 0%, #d5e5da 100%);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			.tlt_box {
				width: 70%;
				height: 100%;
				.fir {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 38rpx;
					font-weight: bold;
					color: #000000;
				}
				.two {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}
				.btn_bind {
					width: 123rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #ffffff;
					opacity: 0.7;
					border-radius: 5rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #badbcd;
				}
			}
			.img_box {
				width: 183rpx;
				height: 169rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.rmservice_box_bot {
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left_orig,
			.right_blue {
				width: 335rpx;
				height: 200rpx;
				border-radius: 20rpx;
				.li_one {
					width: 100%;
					height: 40rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #000000;
				}
				.li_noces {
					width: 100%;
					height: 40rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
				}
				.li_box {
					width: 100%;
					height: 110rpx;
					display: flex;
					align-items: center;
					.txt_shenqing {
						width: 50%;
						height: 100%;
						display: flex;
						align-items: center;
						padding-top: 30rpx;
						.shenqing_btn,
						.chongzhi_btn {
							width: 88rpx;
							height: 34rpx;
							text-align: center;
							border-radius: 17rpx;
							font-size: 22rpx;
							font-weight: 500;
						}
						.shenqing_btn {
							border: 1rpx solid #f2a900;
							color: #e68b03;
						}
						.chongzhi_btn {
							border: 1px solid #4d7ff9;
							color: #3169f2;
						}
					}
					.img_div {
						width: 50%;
						height: 100%;
						image {
							width: 136rpx;
							height: 103rpx;
						}
					}
				}
			}
			.left_orig {
				background: linear-gradient(90deg, #fed883 0%, #ffeabd 100%);
			}
			.right_blue {
				background: linear-gradient(90deg, #7dcdfe 0%, #bbe5fe 100%);
			}
		}
	}

	.goods_box {
		width: 100%;
		height: auto;
		min-height: 460rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.goods_box_once {
			width: 335rpx;
			height: 460rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 9rpx 1rpx rgba(0, 0, 0, 0.1);
			border-radius: 10rpx;

			.goods_box_once_img {
				width: 100%;
				height: 330rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.goods_box_once_tlt,
			.goods_box_once_money {
				width: 100%;
				height: 60rpx;
				line-height: 50rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #000000;
				padding-left: 23rpx;
			}

			.goods_box_once_money {
				color: #f05329;
			}
		}
	}
}
</style>
